import {Component, createRef  } from "react";
class Son extends Component{
  test=()=>{
    console.log('test',this);
    
  }
  render(){
    return(
      <div>
        <h2>子组件</h2>
      </div>
    )
  }
}
  /**
   * 非受控组件：
   * 类似vue模板中使用的ref
   * 1. 可以获取html元素的dom对象
   * 2. 可以获取类组件的实例
   * 使用步骤：
   * 1. 导入createRef方法并创建一个ref对象
   * 2. 元素上通过：ref={ref对象}
   * 3. 通过：this.ref对象.current (dom对象 | 组件实例)
   */
  // 1. 创建h1元素的ref对象
class App extends Component{
  son=createRef()
  getSon=()=>{
    console.log(this.son.current);
    this.son.current.test()
  }
  render(){
    return(
    <div>
       {/* 2. 绑定ref对象 */}
      <Son ref={this.son}/>
      <hr />
      <p>
        <button onClick={this.getSon}>btn</button>
      </p>
    </div>
    )
 
  }
}

export default App